<template>
  <div id="Css">
    <div class="csdesc"><strong>1</strong>：<code>ul>li+li</code> 选择到li后，在每个li相邻的兄弟设置border-top.1相邻兄弟2，设置上边框...6没有（7不存在）的相邻兄弟，底部没边框。
    对于3来说，相邻的有两个，但都只是重复设置元素的上边框，不影响。</div>
    <ul class="demoUl">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>

    <br/>
    <div class="csdesc"><strong>2</strong>：绘制三角形</div>
    <div class="triangle"></div>

    <br/>
    <div class="csdesc"><strong>3</strong>：按钮禁用效果css设置，在禁用按钮的时候，设置cursor的样式变为not-allowed</div>
    <button class="btn" disabled>禁用按钮样式</button>

    <div class="csdesc"><strong>4</strong>：使用CSS滤镜实现背景虚化，filter: blur(2px)，数值越大越模糊</div>
    <div class="fiter">
      <img src="../assets/img/logo.png" alt="logo"/>
      <p>前端高频面试题答案及汇总...</p>
      <p>面试题答案及汇总...</p>
      <p>js忍者秘籍总览...</p>
    </div>

    <div class="csdesc"><strong>5</strong>：使用before伪元素实现面包屑，转义字符：<a href="https://www.cnblogs.com/starof/p/4718550.html" target="_blank">html特殊字符的html，js，css写法汇总</a></div>
    <ul class="break">
      <li><a>首页</a></li>
      <li><a>活动</a></li>
      <li><a>查看</a></li>
    </ul>

    <div class="csdesc"><strong>5</strong>：水波浪效果制作</div>
    <div class="water">
      <div class="water_wave1"></div>
      <div class="water_wave2"></div>
      <div class="water_wave3"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Css'
}
</script>
<style lang="less" scoped>
#Css {
  .demoUl{
    width: 200px;
    height: auto;
    border: 1px solid red;
    &>li+li{
      border-top: 1px solid rebeccapurple;
    }
  }
  .triangle {
    width: 0;
    height: 0;
    border: solid;
    border-color: rebeccapurple transparent transparent transparent;
    border-width: calc(100px * 1.723) 100px 0;
  }
  .btn {
    background: #0d84ff;
    width: 140px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #fff;
    border-radius: 6px;
    border: none;
    font-size: 16px;
    &:disabled {
      background: #79bafd;
      cursor: not-allowed;
    }
  }
  .fiter {
    filter: blur(2px);
  }
  .break {
    display: flex;
    font-size: 14px;
    li {
      color: #0d84ff;
    }
    li:first-child{
      &::before{
        content: ""
      }
    }
    li::before{
      content: "\27A0";
      color: #333;
    }
  }
  .water {
    position: relative;
    overflow: hidden;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid silver;
    text-align: center;
    line-height: 50px;
    animation: water-waves linear infinite;
    .water_wave3 {
      position: absolute;
      top: 50%;
      left: -35%;
      background: #0f7ae4;
      opacity: 0.3;
      width: 200%;
      height: 200%;
      border-radius: 33%;
      animation:inherit;
      animation-direction: 11s;
    }
  }
  @keyframes water-waves {
    0% {transform: rotate(0deg)};
    100% {transform: rotate(360deg)};
  }
}
</style>
